require(['./config'], () => {
    require(['template', 'jquery', 'header', 'footer', 'fix_the_right_side'], (template) => {
        class DetailPage {
            constructor() {
                this.load()
                this.getDetail()
            }
            load() {
                //标题栏隐藏显示
                $(window).scroll(function () {
                    if ($(this).scrollTop() >= 100) {
                        $('.nav-bar-hidden').addClass('nav_fix')
                    } else {
                        $('.nav-bar-hidden').removeClass('nav_fix')
                    }
                })
                //登录提示信息点击删除
                $('.login-notic .icon-delete1').click(function (e) {
                    $('.login-notic').remove()
                })
            }

            //获取当前页面的url

            // 调用接口，详情页数据
            getDetail() {
                const Id = window.location.search.split('=', "2")[1]
                $.get('/api/xiaomi-shop-detail', res => {

                    for (let key in res) {
                        if (key === Id) {
                            const resR = res[key]
                            //颜色
                            const { buy_option } = resR
                            for (let key in buy_option) {
                                if (buy_option[key].name === '颜色') {
                                    const { list } = buy_option[key]
                                    list.forEach(item => {
                                        const { name } = item
                                        $('#selectColor').html(template('color', { name: name }))
                                    })
                                }
                                if (buy_option[key].name === '版本') {
                                    const { list } = buy_option[key]

                                    list.forEach(item => {
                                        const { name } = item
                                        $('#selectVersions').html(template('versions', { name: name }))
                                    })
                                    // for (let key in list) {
                                    //     const listKey=list[key]
                                    //     const { name: versions } = listKey
                                    //     console.log(list)
                                    //     $('#selectVersions').html(template('versions', { versions: versions}))
                                    // }
                                }
                                if (buy_option[key].name === '通用') {
                                    const { list } = buy_option[key]
                                    for (let key in list) {
                                        const { name: general } = list[key]
                                    }
                                }
                            }
                            // const clearfixColor = buy_option[0].list[0].name
                            // console.log(clearfixColor)
                            // 轮播图图片
                            const { goods_list } = resR
                            const arr = goods_list[0]
                            const { goods_info: { imgs, market_price, name, price } } = arr
                            // 传到购物车的图片
                            const shopImg = imgs[0]
                            const shopName = name
                            this.addShopCar(shopImg, shopName, price, Id)
                            //介绍
                            const { product_info: { name: productName, product_desc } } = resR
                            if (res.code === 200) {
                                // 轮播图片
                                $('#imgbox-swiper').html(template('imgboxSwiper', { imgs: imgs }))
                                // 各个名字
                                $('.product-name').html(productName)
                                // 描述
                                $('#desc').html(product_desc)
                                //结算
                                $('.selectedList').html(
                                    ` <li>
                                    ${name}
                                    <span>${price}元<del>${market_price}元</del></span>
                                  </li>`
                                )
                                // 总计
                                $('.total-price').html(`总计:${price}元`)

                            }
                        }

                    }


                })


            }
            // 加入购物车
            addShopCar(shopImg, shopName, price, Id) {
                console.log(shopImg, shopName, price, Id)
                //记录点击加入购物车的次数
                let quantity = 1
                $('.btn-line-primary').click(function () {
                    // const arr = [{ shopName, price, shopImg, Id, quantity }]
                    // localStorage.setItem('list', JSON.stringify(arr))
                    //先判断localStorage有没有这一条list数据
                    let list = JSON.parse(localStorage.getItem('list'))
                    // console.log(list)
                    if (list) {
                        //有list这条数据
                        //list是一个数组，里面有多条数据，应该拿每一条的id和我当前这条进行比较
                        const hasData = list.some(item => {
                            return item.Id === Id
                        }) 
                        if (hasData) {
                            list.forEach(item => {
                                //如果有就数量加1
                                if (item.Id === Id) {
                                    quantity += 1
                                    item.quantity = quantity
                                    alert(`${item.shopName}数量+1,购物车已有${item.quantity}件`)
                                }
                            })
                        } else {
                            list.push({ shopName, price, shopImg, Id, quantity })
                            alert("加入购物车成功")
                        }
                        //如果没有就存一次
                        localStorage.setItem('list', JSON.stringify(list))
                    } else {
                        //没有list这条数据
                        localStorage.setItem('list', JSON.stringify([{ shopName, price, shopImg, Id, quantity }]))
                        alert("加入购物车成功")
                    }

                })
            }
        }
        return new DetailPage()
    })
})